<#ftl output_format="HTML" >
<script src="https://cdn.ckeditor.com/4.14.0/full/ckeditor.js"></script>
<form method="POST" class="form-horizontal" >
    <div class="form-group">
        <label for="category.id">栏目：</label>
        <@spring.formSingleSelectWithNone "notice.category.id" allCategories 'class="form-control" style="width: 10em" required autofocus' />
    </div>
    <div class="form-group">
        <label for="title">标题：</label>
        <@spring.formInput "notice.title" 'class="form-control" maxlength="40" placeholder="标题"' />
    </div>
    <div class="form-group">
        <label for="keywords">关键字：</label>
        <@spring.formInput "notice.keywords" 'class="form-control" maxlength="40" placeholder="关键字"' />
    </div>
    <div class="form-group">
        <label for="brief">摘要：</label>
        <@spring.formTextarea "notice.brief" 'class="form-control" placeholder="摘要" rows="3"' />
    </div>
    <div class="form-group">
        <label for="content">内容：</label>
        <@spring.formTextarea "notice.content" 'class="form-control" rows="20" placeholder="内容"' />
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-primary" value="保存" />
    </div>
</form>
<script>
'use strict';
let editor = null;
$(document).ready(() => {
// https://github.com/ckeditor/ckeditor-docs-samples/blob/master/editors/article-editor/index.html
editor = CKEDITOR.replace(
    'content',
    {
        language: 'zh-cn',
        height: 600,
        resize_enabled: true,
        resize_minHeight: 300,
        contentsCss: [ '<@spring.url "/css/editor-content.css" />' ],
        stylesSet: [
            { name: '行内引用', element: 'q' },
            { name: '首行缩进', element: 'p', styles: { 'text-indent': '2em' } },
            { name: '术语', element: 'dfn' },
            { name: '左浮动图片', element: 'img', styles: { 'float': 'left', 'margin': '.4em .5em 0 0' } },
            { name: '右浮动图片', element: 'img', styles: { 'float': 'right', 'margin': '.4em 0 0 .5em' } }
        ],
        toolbar:  [
                     ['Cut','Copy','PasteText'],
                     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                     ['Format', '-', 'Styles'],
                     ['TextColor','BGColor'],
                     ['Maximize', 'ShowBlocks', '-', 'Source'],
                     '/',
                     ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                     ['NumberedList','BulletedList','-','Blockquote'],
                     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                     ['Link','Unlink','Anchor'],
                     ['Image','Table','HorizontalRule','SpecialChar','PageBreak'],
                  ],
        // Configure your file manager integration. This example uses CKFinder 3 for PHP.
        filebrowserBrowseUrl: '<@spring.url "/file-browser/browser?dir=Files"/>',
        filebrowserImageBrowseUrl: '<@spring.url "/file-browser/browser?dir=Images"/>',
        filebrowserUploadUrl: '<@spring.url "/file-browser/uploader?dir=Files"/>',
        filebrowserImageUploadUrl: '<@spring.url "/file-browser/uploader?dir=Images"/>',

        image_prefillDimensions: false,
        image2_prefillDimensions: false,

        // Reduce the list of block elements listed in the Format drop-down to the most commonly used.
        format_tags: 'p;h1;h2;h3;h4;pre',
        // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
        removeDialogTabs: 'image:advanced;link:advanced',
    });

editor.on('fileUploadResponse', event => {
    event.stop();

    const loader = event.data.fileLoader;

    if (loader.xhr.status == 200) {
        // HTTP OK
        const rsp = JSON.parse(loader.xhr.response);
        event.data.url = '../static' + rsp.url;
        if (rsp.error && rsp.error.message) {
            event.data.message = rsp.error.message;
        }
    } else {
        // HTTP Error
        event.data.message = '(' + loader.xhr.status + ')' + loader.xhr.responseText;
        event.cancel();
    }
 });

console.info('editor created: ' + editor.name);
});
</script>
